<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./css/chat.css" />
        <script src="/socket.io/socket.io.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="background"></div>

            <!-- 登录窗口 -->
            <div class="login" v-if="!hasUsername">
                <div class="itembox">
                    <h1 class="title">登录</h1>
                    <div class="item">
                        <p class="username">用户名:</p>
                        <input
                            class="unameInput"
                            type="text"
                            v-model="username"
                            id=""
                        />
                    </div>
                    <div class="item">
                        <p class="username">头&emsp;像:</p>
                        <label for="file" class="upload">
                            {{uploadfile}}
                        </label>
                        <input
                            class="unameInput"
                            type="file"
                            id="file"
                            style="display: none"
                            v-on:change="chooseFile"
                        />
                    </div>
                    <!-- <div class="item">
                        <p class="username">端口号:</p>
                        <input
                            class="unameInput"
                            type="text"
                            v-model="port"
                            id=""
                        />
                        <div class="reload" @click="reload">刷新页面</div>
                    </div> -->
                    <div class="item">
                        <button class="btn" @click="enter">进入聊天室</button>
                    </div>
                </div>
            </div>

            <!-- 聊天窗口 -->
            <div class="chat" v-if="hasUsername">
                <div class="top">
                    <img
                        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bq233.com%2Fkanqq%2Fpic%2Fupload%2F2018%2F0807%2F1533622762937587.jpg&refer=http%3A%2F%2Fimg.bq233.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641195287&t=d5cadb25a96809ce73d9d20fc8c4355f"
                        alt=""
                        class="head"
                    />
                    <div class="intro">
                        <span class="chatName"
                            >软工1班聊天室&emsp;&emsp;当前在线{{count}}人</span
                        >
                        <br />
                        <span class="author">AUTHOR:陶文波</span>
                    </div>
                </div>
                <!-- 聊天记录窗口 -->
                <div class="content" id="content">
                    <!-- 说话 -->
                    <div v-for="(item,index) of speaksData" :key="index">
                        <!-- 发言 -->
                        <div
                            class="user_speak"
                            :class="item.username === username ? 'right' : 'left'"
                            v-if="item.state === 2"
                        >
                            <!-- 头像 -->
                            <img
                                class="userHeadImg"
                                :src="item.headImage"
                                alt=""
                            />

                            <!-- 发言 -->
                            <div class="userchat">
                                <div class="name">{{item.username}}</div>
                                <div class="speak" v-html="item.speak"></div>
                            </div>
                        </div>

                        <!-- 离开和进入 -->
                        <div class="enterOrLeave" v-if="item.state !== 2">
                            <div class="enter" v-if="item.state === 1">
                                --{{item.username}}--进入了聊天室
                            </div>
                            <div class="leave" v-if="item.state === 0">
                                --{{item.username}}--离开了聊天室
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 发送窗口 -->
                <div class="bottom">
                    <p class="input" contenteditable="true" id="input"></p>
                    <div class="btn_box">
                        <!-- 图片emoj -->
                        <div class="iconBox">
                            <label for="imoji_file"><img src="./img/pic.png" alt="" class="chooseimg" /></label>
                            <input
                                class="unameInput"
                                type="file"
                                id="imoji_file"
                                style="display: none"
                                v-on:change="chooseImojiFile"
                            />
                        </div>

                        <!-- 发送 -->
                        <div class="send">
                            <button class="sendBtn" @click="send">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        const STATE_LEAVE = 0;
        const STATE_ENTER = 1;
        const STATE_SPEAK = 2;
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue!",
                username: "",
                inputText: "",
                count: 0,
                socket: "",
                hasUsername: false,
                speaksData: [],
                uploadfile: "上传图片",
                headImgUrl: "",
                port: "", //端口
                imoji:""
            },
            created() {
                this.port = window.location.port;
            },
            updated() {
                this.toBottom();
            },
            mounted() {
                this.toBottom();
            },
            methods: {
                toBottom() {
                    if (this.hasUsername) {
                        let speaks =
                            document.getElementById("content").children;
                        let last = speaks[speaks.length - 1];
                        if (this.speaksData.length > 3) {
                            last.scrollIntoView(false);
                        }
                    }
                },
                // reload(){
                //     let url = window.location.href.replace(window.location.port, this.port);

                //     window.location.replace(url);
                // },
                enter() {
                    if (
                        /^\s*$/g.test(this.username) ||
                        /^\s*$/g.test(this.headImgUrl)
                    ) {
                        return;
                    }
                    
                    this.socket = io("http://localhost:55535");
                    // 当前在线人数
                    this.socket.on("count", (data) => {
                        this.count = data;
                    });
                    // 将用户名发送给服务端
                    this.socket.emit("username", this.username);
                    this.socket.emit("sendHeadImg", this.headImgUrl);

                    // 接受说话
                    this.socket.on("somebodySpeak", (data) => {
                        this.speaksDataAdd(data);
                    });
                    // 接收离开事件
                    this.socket.on("somebodyLeave", (data) => {
                        this.speaksDataAdd(data);
                    });
                    // 接收离开事件
                    this.socket.on("somebodyEnter", (data) => {
                        this.speaksDataAdd(data);
                    });

                    this.hasUsername = true;
                },
                speaksDataAdd(data) {
                    this.speaksData.push(data);
                },
                send() {
                    let speak = input.innerHTML;
                    let speak_copy = speak
                        .replace("<div>", "")
                        .replace("</div>", "");

                    if (
                        !(
                            /^\s*$/g.test(speak_copy) ||
                            /^(&nbsp;\s*)*$/g.test(speak_copy)
                        )
                    ) {
                        this.socket.emit("speak", speak);
                    }

                    input.innerHTML = "";
                },
                chooseFile() {
                    var img = document.getElementById("file").files[0];
                    // console.log(img);
                    let fr = new FileReader();
                    fr.readAsDataURL(img);
                    fr.onload = () => {
                        this.uploadfile = img.name;
                        this.headImgUrl = fr.result;
                        // console.log(fr.result);
                    };
                },
                chooseImojiFile(){
                    var img = document.getElementById("imoji_file").files[0];
                    // console.log(img);
                    let fr = new FileReader();
                    fr.readAsDataURL(img);
                    fr.onload = () => {
                        var img = document.createElement("img");
                        img.src = fr.result;
                        img.classList.add("inputImg");
                        img.onload = function(){
                            input.appendChild(img);
                        }
                        // console.log(img);
                        // console.log(fr.result);
                    };
                }
            },
        });
    </script>
</html>
